<template>
<div class="text-gray-100 bg-gray-900 min-h-screen">
  <div class="container mx-auto">
    <h1 class="text-center  border-b-2 border-gray-100  ">  localStorage </h1>
    <h1 v-if="localStorage_length == 1"> it`s nothing here ~  </h1>


    <div  v-if="localStorage_length != 1">
      <h1> localStorage  length : {{ localStorage_length }}</h1>
      <div class=" space-x-2 flex ">
        <button class="p-5 flex-1 text-black"   @click="previous()"           > previous  </button>
        <button class="p-5 flex-1 text-black "  @click="Next()"> Next </button>
      </div>
      <h1>{{key_index}}</h1>
      <div v-for="item,index in word_list">
        <div v-if="index == key_index">
          <h1   class="text-7xl" >{{item}}</h1>
          <button class="uppercase w-full text-black py-3 my-6 "  @click="isShow = !isShow">show</button>
          <h1 v-if="isShow == true"  class="text-6xl">{{chinese}}</h1>
        </div>
      </div>
      <br><br><br><br><br>    <br><br><br><br><br>    <br><br><br><br><br>    <br><br><br><br><br>    <br><br><br><br><br>    <br><br><br><br><br>
      <button class="p-3 "  @click="clear_localStorage()">clear localStorage</button>
    </div>



  </div>
</div>
</template>

<script>
export default {
  name: "LocalStorage",
  data(){
    return{
      localStorage_length : 0,
      word_list : [],
      key_index : -1,
      isShow : false,
      chinese : '',
    }
  },
  watch:{
    key_index(val, oldVal) {
      console.log(this.word_list[this.key])
      var url = "  http://dict.youdao.com/dictvoice?audio=" + this.word_list[this.key_index] + "&type=2";
      var audio = new Audio(url);
      audio.load();
      audio.play();
    },
    isShow(val, oldVal) {
      setTimeout(()=>{
        this.isShow = false
      },360)
    },
  },
  methods:{
    clear_localStorage(){
      localStorage.clear();
    },
    Next(){
      this.key_index++
      this.chinese = localStorage.getItem(this.word_list[this.key_index])
    },
    previous(){
      this.key_index--
      this.chinese = localStorage.getItem(this.word_list[this.key_index])
    }
  },
  mounted() {
    this.localStorage_length = localStorage.length
  },
  created() {
    document.title = 'LocalStorage'
    // 遍历 localStorage 的 key 和 value:
    for (var i = 0; i < localStorage.length; i++) {
      let localStorage_key = localStorage.key(i)
      let localStorage_value = localStorage.getItem(localStorage_key);
      console.log(localStorage_key);
      console.log(localStorage_value);
      if (localStorage_key !== "loglevel:webpack-dev-server"){
        this.word_list.push(localStorage_key)
      }
    }
  }
}
</script>

<style scoped>

</style>
